<template>
  <div class="edit">
    <header>
      <van-nav-bar title="个人信息" :border="false">
        <template #left>
          <van-icon name="arrow-left" size="15" @click="gotoback"></van-icon>
        </template>
      </van-nav-bar>
    </header>
    <main>
      <div class="topbox">
        <van-cell is-link title="头像">
          <van-uploader v-model="fileList" />
        </van-cell>
      </div>
      <div class="centerbox">
        <van-cell is-link title="昵称" @click="gotoEditNM">
          <span>{{ username }}</span>
        </van-cell>
        <van-cell is-link title="一句话介绍" @click="gotoEditSigned">
          <span class="signed">{{ signed || "点击设置" }}</span>
        </van-cell>
        <!-- 性别 -->
        <div class="sexbox">
          <van-cell is-link @click="showSexBox" title="性别">
            <span>{{ sexstr }}</span>
          </van-cell>
          <van-popup
            v-model:show="sexshow"
            position="bottom"
            round
            :style="{ height: '24%' }"
            class="sexbox"
          >
            <van-picker
              title="性别"
              item-height="24%"
              :columns="columns"
              @confirm="onConfirm"
              @cancel="onCancel"
              visible-item-count="4"
            />
          </van-popup>
        </div>
        <!-- 生日选择框 -->
        <div class="birthdaybox">
          <van-cell is-link @click="showPopup" title="生日">
            <span>{{ birarr || "点击选择" }}</span>
          </van-cell>
          <van-popup
            v-model:show="birthdayshow"
            position="bottom"
            round
            :style="{ height: '32%' }"
            class="birthday"
          >
            <van-datetime-picker
              v-model="currentDate"
              type="date"
              title="选择年月日"
              :min-date="minDate"
              :max-date="maxDate"
              item-height="30%"
              @cancel="cancel"
              @click-overlay="hide"
              @confirm="confirm"
              :formatter="formatter"
            />
          </van-popup>
        </div>
      </div>
      <div class="fotbox">
        <van-cell is-link title="阅读爱好" @click="gotoEditLike"
          ><span>点击选择</span>
        </van-cell>
        <!-- 学历 -->
        <van-cell is-link @click="showeduBox" title="学历">
          <span>{{ edustr || "点击选择" }}</span>
        </van-cell>
        <van-popup
          v-model:show="edushow"
          position="bottom"
          round
          :style="{ height: '30%' }"
          class="sexbox"
        >
          <van-picker
            item-height="30%"
            :columns="columnsedu"
            @confirm="onConfirmedu"
            @cancel="onCanceledu"
            visible-item-count="4"
          />
        </van-popup>

        <!-- 情感状态 -->
        <van-cell is-link @click="showqgBox" title="情感状态">
          <span>{{ qgstr || "点击选择" }}</span>
        </van-cell>
        <van-popup
          v-model:show="qgshow"
          position="bottom"
          round
          :style="{ height: '30%' }"
          class="sexbox"
        >
          <van-picker
            title="情感状态"
            item-height="30%"
            :columns="columnsqg"
            @confirm="onConfirmqg"
            @cancel="onCancelqg"
            visible-item-count="4"
          />
        </van-popup>
        <van-cell is-link title="职业" @click="gotoEditWork">
          <span>点击设置</span>
        </van-cell>
      </div>
    </main>
    <p class="fonterext">
      <van-icon
        name="warning"
        color="gold"
      />&nbsp;&nbsp;樊登读书重视您的个人信息，以上信息将仅用在书记、内容推荐、以便为您提供更优质、精准的服务。
    </p>
  </div>
</template>

<script>
import { ref, computed, onBeforeMount } from "vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";
import { postEditApi, postEditChaXunApi } from "../../utils/loginapi";
// import { Toast } from "vant";
export default {
  setup() {
    const fileList = ref([
      { url: "https://i.loli.net/2021/07/21/xIuMA2gGVWLUwaX.png" },
      // Uploader 根据文件后缀来判断是否为图片文件
    ]);
    // 获取登录token
    const token = localStorage.getItem("token");
    const username = ref("");
    const sexstr = ref("");
    const birarr = ref("");
    const qgstr = ref("");
    const edustr = ref("");
    const userimg = ref("");
    const signed = ref("");
    // 用户信息
    onBeforeMount(() => {
      // 获取用户信息
      postEditChaXunApi({ usertel: token }).then((res) => {
        username.value = res.data.username;
        sexstr.value = res.data.sex;
        birarr.value = res.data.birthday;
        qgstr.value = res.data.qg;
        edustr.value = res.data.education;
        userimg.value = res.data.userimg;
        signed.value = res.data.signed;
      });
    });
    // 性别
    const columns = ["男", "女", "保密"];
    // 性别弹窗显示隐藏
    const sexshow = ref(false);
    const showSexBox = () => {
      sexshow.value = true;
    };
    const hideSexBox = () => {
      sexshow.value = false;
    };
    // 性别选择事件
    const onConfirm = (value) => {
      sexstr.value = value;
      postEditApi({ usertel: token, sex: value }).then((res) => {
        if (res.status === 0) {
          sexshow.value = false;
          Toast("修改成功");
        } else {
          Toast("无法获取登录状态");
        }
      });
    };
    const onCancel = () => {
      sexshow.value = false;
    };

    // 生日弹窗显示隐藏
    const birthdayshow = ref(false);
    const showPopup = () => {
      birthdayshow.value = true;
    };
    const hidePopup = () => {
      birthdayshow.value = false;
    };
    // 生日确定事件
    const confirm = () => {
      birarr.value = currentDate.value.toLocaleString().split("上")[0];
      postEditApi({
        usertel: token,
        birthday: birarr.value.toLocaleString().split("上")[0],
      }).then((res) => {
        if (res.status === 0) {
          birthdayshow.value = false;
          Toast("修改成功");
        } else {
          Toast("无法获取登录状态");
        }
      });
    };

    // 生日选择取消事件
    const cancel = () => {
      birthdayshow.value = false;
    };
    // 生日选择器
    const currentDate = ref(new Date(2021, 1, 17));
    // 生日格式化
    const formatter = (type, val) => {
      if (type === "year") {
        return `${val}年`;
      }
      if (type === "month") {
        return `${val}月`;
      }
      if (type === "day") {
        return `${val}日`;
      }
      return val;
    };
    // 情感状态
    const columnsqg = ["单身", "热恋", "已婚", "神秘", "丧偶"];
    // 情感弹窗显示隐藏
    const qgshow = ref(false);
    const showqgBox = () => {
      qgshow.value = true;
    };
    const hideqgBox = () => {
      qgshow.value = false;
    };
    // 情感选择事件
    const onConfirmqg = (value) => {
      qgstr.value = value;
      postEditApi({ usertel: token, qg: value }).then((res) => {
        if (res.status === 0) {
          qgshow.value = false;
          Toast("修改成功");
        } else {
          Toast("无法获取登录状态");
        }
      });
    };
    const onCancelqg = () => {
      qgshow.value = false;
    };

    // 学历状态
    const columnsedu = ["高中以下", "专科", "本科", "研究生", "研究生以上"];
    // 学历弹窗显示隐藏
    const edushow = ref(false);
    const showeduBox = () => {
      edushow.value = true;
    };
    const hideeduBox = () => {
      edushow.value = false;
    };
    // 学历选择事件
    const onConfirmedu = (value) => {
      edustr.value = value;
      postEditApi({ usertel: token, education: value }).then((res) => {
        if (res.status === 0) {
          edushow.value = false;
          Toast("修改成功");
        } else {
          Toast("无法获取登录状态");
        }
      });
    };
    const onCanceledu = () => {
      edushow.value = false;
    };

    // 路由切换
    const $router = useRouter();
    const gotoback = () => {
      $router.go(-1);
    };
    const gotoEditNM = () => {
      $router.replace("/edit/name?username=" + username.value);
    };
    const gotoEditLike = () => {
      $router.replace("/edit/like");
    };
    const gotoEditSigned = () => {
      $router.replace("/edit/signed");
    };
    const gotoEditWork = () => {
      $router.replace("/edit/work");
    };

    return {
      fileList,
      onBeforeMount,
      username,
      sexstr, //性别展示存储的数值
      sexshow, //性别显示变量
      hideSexBox, //性别框隐藏事件
      showSexBox, //性别框显示事件
      columns,
      onCancel,
      onConfirm,
      birthdayshow,
      minDate: new Date(1900, 1, 1), //生日区间
      maxDate: new Date(2021, 7, 21),
      currentDate,
      signed,
      confirm, //生日确定事件
      cancel, //生日取消事件
      showPopup, //显示事件
      hidePopup, //隐藏事件
      formatter, //生日格式化
      birarr,
      qgstr, //性别展示存储的数值
      qgshow, //性别显示变量
      hideqgBox, //性别框隐藏事件
      showqgBox, //性别框显示事件
      columnsqg,
      onCancelqg,
      onConfirmqg,
      edustr, //性别展示存储的数值
      edushow, //性别显示变量
      hideeduBox, //性别框隐藏事件
      showeduBox, //性别框显示事件
      columnsedu,
      onCanceledu,
      onConfirmedu,
      computed,
      gotoback,
      gotoEditNM,
      gotoEditLike,
      gotoEditSigned,
      gotoEditWork,
    };
  },
};
</script>

<style lang="less">
:root {
  --van-nav-bar-icon-color: #000;
  --van-nav-bar-text-color: #000;
}
.edit {
  height: 100vh;
  background: #f5f5f5;
  .topbox {
    margin-top: 10px;
    .van-cell {
      height: 60px;
      align-items: center;
      .van-uploader__wrapper,
      .van-uploader__upload,
      .van-uploader__input,
      .van-uploader__preview,
      .van-image,
      .van-image__img {
        // float: left;
        width: 45px;
        height: 45px;
        margin: 0px;
        padding: 0;
      }
    }
  }
  .centerbox {
    margin: 10px 0;
  }
  .signed {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  p {
    padding: 20px;
    font-size: 10px;
    font-family: PingFangSC;
    color: #b8b8b8;
    line-height: 16px;
  }
}
</style>
